Condensing large amounts of information into small available spaces is one of the major challenges in visual design. In many cases, this results in a tendency to make things as small as possible. This tendency causes problems in translation because it forces translators to find words that not only optimally translate the source text, but also fit into the available space. This may result in clipped text, non-optimal translations, unintelligible abbreviations, or even untranslated or garbled text strings in translated visual designs that look bad or even ridiculous in other languages. If the translated text does not fit into the available display area, it may be abbreviated, cut off, or even remain untranslated or return distorted text in the graphical display. FIG. 1 depicts some examples of the problems experienced in visual design text translation. A button in a webpage display may be given exactly the minimum required width and height to accommodate the word “Send” in English in order to fit in numerous other visual elements beside it in the graphical display. In this example, the resulting button is too small to accommodate the German translation “Senden”. The visual designer will therefore have to look for an abbreviation like “Send.” or “Se . . . n” as shown in the figure. This will result in a less than optimal look for the webpage in German.
In addition, the shorter the source text, the smaller the available space, and the harder it may be to find a suitable alternative translation or abbreviation. Paradoxically, the more effort spent on the design—and thus the exploitation of the available space—the worse the situation can become. Even more paradoxically, visual designers with different native languages tend to choose English as lingua franca. But English has a tendency toward short words. Visual elements optimized to accommodate an English text are in many cases therefore too narrow to accommodate translations in more elaborate languages such as Italian.
Further, translation does not always result in a one-to-one correspondence between the source and target languages. A single word in English can have multiple translations in another language. For instance, the word “supply” in English can have varying translations in Spanish depending on whether the word is used as a verb or a noun. Even within the verb and noun categories themselves, the Spanish translation may differ depending on the particular context. On the other hand, certain English words might have only a single meaning in another language. What's more, in addition to semantic variations among words from one language to another, adjectives and articles may sometimes change spelling according to the gender of the nouns. Therefore, when re-using a text string in multiple places, visual designers need to ensure that the text string is translated in such a way that the text translation is correct for a given context.
In addition to text that increases in length when it is translated, font size can differ among language groups. For instance, East Asian languages usually display text in a larger font size than many other language groups. As used herein the terms “font” and “font size” may refer to (1) font type such as “Arial”, (2) font sub-types such as “Arial Narrow”, (3) font weight such as “bold”, (4) font style such as “italic”, (5) letter-spacing such as 125%, or (6) font size (=height) such as 12 pt. All of these properties may influence the horizontal width of the text, although this may differ based on the font used.
Furthermore, although this problem has been described in terms of software development in the visual design of graphical user interfaces for websites, desktop applications, mobile apps, etc., the problem is not so limited—the same issues may arise wherever visual design meets translation. For example, in the print layout of comic books, translations need to fit into limited sized speech balloons. In other cases, captions like “prewash” on washing machine displays need to be translated such that the text still fits within the various knobs and buttons.
This affects the size of the graphical interface controls that display the text strings and potentially necessitates relocating and resizing the user interface controls. The best way to ensure that a graphical design has a consistent look and feel throughout different translated versions is for the development team to design it with resizing and other required target language variances in mind.